<template>
  <dw-menu-datagrid-form
    ref="labelGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #labelColorSlot="{ scope }">
      <el-tag dw-if="scope.row.labelColor" :color="scope.row.labelColor" effect="dark" type="info" round>{{ scope.row.tagName }}</el-tag>
    </template>
    <template #formSlot>
      <table class="dw-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">标签名称</span></td>
            <td>
              <el-form-item
                prop="tagName"
                :rules="[
                  {
                    required: true,
                    message: '请填写标签名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.tagName" placeholder="请输入标签名称..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span>颜色</span></td>
            <td>
              <el-form-item
                prop="tagColor"
                :rules="[
                  {
                    required: true,
                    message: '请配置颜色...',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.tagColor" placeholder="请配置颜色..." class="color-picker">
                  <template #append>
                    <el-color-picker v-model="formData.tagColor" />
                  </template>
                </el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span>排序号</span></td>
            <td>
              <el-form-item prop="sortNo">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </td>
            <td class="dw-td-label"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { ILabel } from '../tag';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';

defineOptions({
  name: 'LabelFormGrid',
});

const labelGridRef = ref();
const dataGridTitle = '系统标签列表';
const formData = ref<ILabel>({
  id: '',
  categoryCode: '',
  tagName: '',
  tagColor: '',
  sortNo: 1,
});

const renderFormTitle = (stateValue: 'add' | 'edit', data: ILabel) => {
  if (stateValue === 'add') {
    return '系统标签信息';
  } else {
    return data.tagName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'tagName',
    label: '标签名称',
  },
  {
    prop: 'tagColor',
    label: '标签颜色',
    align: 'center',
    width: 300,
    slotName: 'labelColorSlot',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const params = ref({
  categoryCode: '',
  keyword: '',
});
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/tag/#{id}',
  delInfoMsgEmphasize: '#{tagName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/tag/list',
};
const getPageHttpConfig: IGetPageHttpConfig<ILabel> = {
  url: '/admin-api/sys/tag/page/list',
  query: () => {
    return { categoryCode: params.value?.categoryCode || '' };
  },
};
const getInfoHttpConfig: IGetInfoHttpConfig<ILabel> = {
  url: '/admin-api/sys/tag/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<ILabel> = {
  url: '/admin-api/sys/tag',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<ILabel> = {
  url: '/admin-api/sys/tag',
};
const loadData = (categoryCode: string) => {
  params.value.categoryCode = categoryCode;
  formData.value.categoryCode = categoryCode;
  labelGridRef.value.loadData();
};
const setCategoryCode = (categoryCode: string) => {
  params.value.categoryCode = categoryCode;
  formData.value.categoryCode = categoryCode;
};
defineExpose({ loadData, setCategoryCode });
</script>
<style lang="scss" scoped></style>
